import type { questionComponentType, QuestionParagraphPropsType } from '@/utils/type'
import {type FC, useEffect} from 'react'
import { Form,Input,Checkbox } from 'antd'

const { TextArea } = Input;

type propsType =questionComponentType & {
  onChange: (value:QuestionParagraphPropsType) => void
} 


const ParagraphPropComponent:FC<propsType> = (props:propsType)=>{
  const [form] = Form.useForm();
  const { text, isCenter } = props.props;

  const handleChange = () => {
    props.onChange(form.getFieldsValue())
  }

  useEffect(() => {
    form.setFieldsValue({  text, isCenter  })
  }, [ text, isCenter , form])


  return (
   <Form
      onValuesChange={handleChange}
      layout="vertical"
      initialValues={{ text, isCenter }}
      form={form}
      disabled={props.isLocked}
    >

      <Form.Item name="text"  label="段落内容:" rules={[{ required: true, message: '请输入段落内容' }]}>
        <TextArea></TextArea>
      </Form.Item>
      <Form.Item name="isCenter" valuePropName="checked" >
        <Checkbox>居住显示</Checkbox>
      </Form.Item>


    </Form>
  )
}


export default ParagraphPropComponent
